Buefy is a UI framework that’s based on Bulma.
In this article, we’ll look at how to use Buefy in our Vue app.
Confirm Dialog
We can add a cancel button with the confirm button with the cancelText property:
<template>
<section>
<button class="button is-primary" @click="confirm">Launch confirm</button>
</section>
</template>
<script>
export default {
name: "App",
methods: {
confirm() {
this.$buefy.dialog.confirm({
title: "Title",
message: "Are you sure?",
cancelText: "Disagree",
confirmText: "Agree",
onConfirm: () => this.$buefy.toast.open("confirmed")
});
}
}
};
</script>
Also, we can add an icon with the type and iconPack properties:
<template>
<section>
<button class="button is-primary" @click="confirm">Launch confirm</button>
</section>
</template>
<script>
export default {
name: "App",
methods: {
confirm() {
this.$buefy.dialog.confirm({
title: "Title",
message: "Are you sure?",
confirmText: "Agree",
type: "is-danger",
iconPack: "fa",
hasIcon: true,
onConfirm: () => this.$buefy.toast.open("confirmed")
});
}
}
};
</script>
iconPack sets the icon pack to use. 'fa' stands for Font Awesome.
is-danger is the icon class name.
hasIcon enables the icon to be displayed.
Prompt Dialog
Buefy also comes with its own prompt dialog box.
For example, we can write:
<template>
<section>
<button class="button is-medium" @click="prompt">Launch prompt</button>
</section>
</template>
<script>
export default {
name: "App",
methods: {
prompt() {
this.$buefy.dialog.prompt({
message: `What's your name?`,
inputAttrs: {
placeholder: "Enter name",
maxlength: 10
},
trapFocus: true,
onConfirm: value => this.$buefy.toast.open(`Your name is: ${value}`)
});
}
}
};
</script>
We call the prompt method with a message and inputAttrs properties.
message has the message.
inputAttrs has placeholders and max length of the input.
The onConfirm method is called after the dialog is dismissed.
value has the value entered in the prompt input.
trapFocus focus on the prompt input when it’s opened.
We can also add a numeric prompt input:
<template>
<section>
<button class="button is-medium" @click="prompt">Launch prompt</button>
</section>
</template>
<script>
export default {
name: "App",
methods: {
prompt() {
this.$buefy.dialog.prompt({
message: `What's your age?`,
inputAttrs: {
placeholder: "Enter age",
maxlength: 3,
min: 18
},
trapFocus: true,
onConfirm: value => this.$buefy.toast.open(`Your age is: ${value}`)
});
}
}
};
</script>
maxlength restricts the length and min is the min value.
We can control how the dialog is closed.
For example, we can write:
<template>
<section>
<button class="button is-medium" @click="prompt">Launch prompt</button>
</section>
</template>
<script>
export default {
name: "App",
methods: {
prompt() {
this.$buefy.dialog.prompt({
message: `What's your age?`,
inputAttrs: {
placeholder: "Enter age"
},
trapFocus: true,
onConfirm: (value, { close }) => {
this.$buefy.toast.open(`Sending...`);
setTimeout(() => {
this.$buefy.toast.open(`Success`);
close();
}, 2000);
}
});
}
}
};
</script>
to call the close method on the onConfirm callback.
This way, we can close it when we want instead of closing it immediately.
Promise
The dialog methods also return a promise.
To do that, we set the defaultProgrammaticPromise to true when we call Vue.use .
For example, we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import Buefy from "buefy";
import "buefy/dist/buefy.css";
Vue.use(Buefy, {
defaultProgrammaticPromise: true
});
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount("#app");
App.vue
<template>
<section>
<button class="button is-medium" @click="prompt">Launch prompt</button>
</section>
</template>
<script>
export default {
name: "App",
methods: {
async prompt() {
await this.$buefy.dialog.prompt({
message: `What's your age?`,
inputAttrs: {
placeholder: "Enter age"
}
});
console.log("closed");
}
}
};
</script>
Now we see that the 'closed' string is logged after we closed the prompt.
Conclusion
We can add confirm dialogs with Buefy and configure it in various ways.
